﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/lib/all.css" rel="stylesheet" />

    <script src="../../resources/lib/json2.js" type="text/javascript"></script>
    <script src="../../resources/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/jquery/jquery.form.min.js" type="text/javascript"></script>
    <script src="../../resources/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script src="../../resources/lib/TempletData.js"></script>
    <script src="../../resources/lib/citylink.js"></script>
    <script src="../../resources/js/jsdate.js"></script>

    <script type="text/javascript">
        var listbox = null;
        var addNew = false;
        var myaccount = '../../resources/lib/ligerUI/skins/icons/myaccount.gif';
        /*var memeber = '../../resources/lib/ligerUI/skins/icons/memeber.gif';
         var archives = '../../resources/lib/ligerUI/skins/icons/archives.gif';*/
//        var DepartmentData = { Rows: [{ "HolidayGroup": 1, "HolidayGroupName": "节假1组" },
//            { "HolidayGroup": 2, "HolidayGroupName": "节假2组" },
//            { "HolidayGroup": 3, "HolidayGroupName": "节假3组" },
//            { "HolidayGroup": 4, "HolidayGroupName": "节假4组"},
//            { "HolidayGroup": 5, "HolidayGroupName": "节假5组"}], Total: 5 };
        var EmployeeData = { Rows: [{
                                            "ID": 1,
                                            "HolidayGroup": 3,
                                            "HolidayName": "国庆节",
                                            'Text1':"无",
                                            "StartDay": new Date(),
                                            "EndtDay": new Date() },
                                            {
                                                "ID": 2,
                                                "HolidayGroup": 5,
                                                "HolidayName": "劳动节",
                                                'Text1':"无",
                                                "StartDay": new Date(),
                                                "EndtDay": new Date() },
                                            {
                                                "ID": 3,
                                                "HolidayGroup": 1,
                                                "HolidayName": "除夕节",
                                                'Text1':"无",
                                                "StartDay": new Date(),
                                                "EndtDay": new Date() }], Total: 3 };
//        var DepartmentList = DepartmentData.Rows;
        var manager, g;
        $(f_initGrid);
        $("#form1").hide();
        function f_initGrid(){
            g =  manager = $("#maingrid").ligerGrid({
                columns: [
//                { display: '主键', name: 'ID', width: 50, type: 'int',frozen:true },
//                    { display: '节假日组', name: 'HolidayGroup', width: 100, isSort: false,
//                        editor: { type: 'select', data: DepartmentList, valueField: 'HolidayGroup', textField: 'HolidayGroupName' }, render: function (item)
//                    {
//                        for (var i = 0; i < DepartmentList.length; i++)
//                        {
//                            if (DepartmentList[i]['HolidayGroup'] == item.HolidayGroup)
//                                return DepartmentList[i]['HolidayGroupName']
//                        }
//                        return item.HolidayGroupName;
//                    }
//                    },
                    { display: '节假日名称', name: 'HolidayName', width: 100,
                        editor: { type: 'text' }
                    },
                    { display: '开始时间', name: 'StartDay', type: 'date',showTime:true ,width: 150, editor: { type: 'date',showTime:true},
                        render: function(rowdata, rowindex, value) {
                            return  value.pattern("yyyy-MM-dd hh:mm");
                        }
                    },
                    { display: '结束时间', name: 'EndtDay', type: 'date', showTime:true ,width: 150, editor: { type: 'date',showTime:true},
                        render: function(rowdata, rowindex, value) {
                            return  value.pattern("yyyy-MM-dd hh:mm");
                        }
                    },
                    { display: '备注', name: 'Text1', type: 'text',  editor: { type: 'text'} },
                    { display: '操作', isSort: false, width: 120, render: function (rowdata, rowindex, value)
                    {
                        var h = "";
                        if (!rowdata._editing)
                        {
                            h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改" +
                                    "</a> ";
                            h += "<a href='javascript:deleteRow(" + rowindex + ")'>删除</a> ";
                        }
                        else
                        {
                            h += "<a href='javascript:endEdit(" + rowindex + ")'>提交</a> ";
                            h += "<a href='javascript:cancelEdit(" + rowindex + ")'>取消</a> ";
                        }
                        return h;
                    }
                    }
                ],
                onSelectRow: function (rowdata, rowindex) {
                    $("#txtrowindex").val(rowindex);
                },
                enabledEdit: true, clickToEdit: false, isScroll: false,checkbox:true, rownumbers:true,
                data:EmployeeData,
                width: '100%'
            });
        }
        function beginEdit(rowid) {
            manager.beginEdit(rowid);
        }
        function cancelEdit(rowid) {
            manager.cancelEdit(rowid);
        }
        function endEdit(rowid)
        {
            manager.endEdit(rowid);
        }

        function deleteRow(rowid)
        {
            if (confirm('确定删除?'))
            {
                manager.deleteRow(rowid);
            }
        }
        function cancelAllEdit()
        {
            manager.cancelEdit();
        }
        function endAllEdit()
        {
            manager.endEdit();
        }
        var newrowid = 100;
        function addNewRow()
        {
            manager.addEditRow();
        }

        function getSelected()
        {
            var row = manager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
        function getData()
        {
            var data = manager.getData();
            alert(JSON.stringify(data));
        }


        $(function () {
            listbox = $("#listbox2").ligerListBox({
                width: "100%",
                height: "100%",
                data: [
                    {text: '节假1组',id:'1','Text1':"无","StartDay": new Date(),"EndtDay": new Date()},
                    {text: '节假2组',id:'2','Text1':"123","StartDay": new Date(),"EndtDay": new Date()} ],
                //idFieldName :'id',

                onSelect: function(id, text) {
                    addNew = false;
                    var data;
                    for (var i = 0; i < this.data.length; i++) {
                        if (this.data[i].id == id) {
                            data = this.data[i];
                            break;
                        }
                    }
                    $("#form1 input[name=text]").val(data.text);
//                    $("#form1 input[name=StartDay]").val(data.StartDay);
//                    $("#maingrid [name=EndtDay]").val(data.EndtDay);
//                    $("#maingrid [name=Text1]").val(data.Text1);
//                    $("#form1 input[name=comment]").val(data.comment);
//                    $("#form1 input[name=Identify]").val(data.Identify);
//                    $("#form1 input[name=pinCodeLen]").val(data.pinCodeLen);
//                    $("#form1 input[name=duressCodeLen]").val(data.duressCodeLen);
//                    $("#form1 input[name=duressAuthority]").val(data.duressAuthority);
//                    $("#form1 input[name=memberGroup]").val(data.memberGroup);
//                    $("#form1 input[name=activeStart]").val(data.activeStart);
//                    $("#form1 input[name=activeEnd]").val(data.activeEnd);
//                    $("#form1 input[name=action]").val(data.action);
//                    $("#form1 input[name=areas]").val(data.areas);
//                    $("#form1 input[name=description]").val(data.description);
                }
            });

            $("form").ligerForm();
            $('#form1').ajaxform(function() {
                alert("area form ajax submit end!");
            });

        });

        function addTemplet() {
//            alert(1);
            //$("#tForm input[type=reset]").click();
            $("#form1 [name='text']").val("新建节假日组");
//            alert(1);
            //$("#form1").show();
            addNew = true;
            $("#maingrid").hide();
//            $("#btnOK").hide();
            $("#add").hide();
//            $("#txtKey").hide();
            $("#searchbar").hide();
//            $("#form1").show();


        }
        function reload() {
           alert("加载成功");

        }
        function removeItem() {

        }
        function getData()
        {
            var data = manager.getData();
            alert(JSON.stringify(data));
            alert("保存成功");
        }

    </script>
    <style type="text/css">
        .l-table-edit {}
        .l-table-edit-td{ padding:4px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    </style>
</head>
<body id="layout1" style="width:100%; margin:0 auto;">
<div style="position:absolute; left: 5px; top: 5px; right: 5px; height: 25px; ">
    <a class="l-button" onclick="reload()" style="float:left;margin-right:10px;">重新加载</a>
    <!--<a class="l-button" onclick="loadData() " style="float:left;margin-right:10px; width: 80px;">加载</a>-->
    <a class="l-button" onclick="addTemplet()" style="float:left;margin-right:10px; width: 80px;">添加节假组</a>
    <a class="l-button" onclick="removeItem()" style="float:left;margin-right:10px;">删除</a>
    <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getData()">保存当前编辑</a>
    &nbsp 节假日组：<input id="txtKey" type="text" />
    <input id="btnOK"  class="l-button" type="button" value="搜索" onclick="f_search()" />
    <br style="clear: both;" />
</div>
<div style="position:absolute; left: 5px; top: 35px; bottom: 5px; width: 190px; border:1px solid #ccc; overflow:auto;  ">
    <ul id="listbox2" style="border: none;">
    </ul>
</div>

<div style="position:absolute; left: 202px; right: 5px; top: 35px; bottom: 5px; border:1px solid #ccc; overflow:auto; padding: 5px;">

    <form id="form1" class="liger-form">
        <div class="fields">
            <input data-type="text" data-label="节假组名称" name="text" />
        </div>
    </form>
    <a class="l-button" id="add" style="width:100px;float:left; margin-left:6px;" onclick="addNewRow()">添加节假日</a>

    <!--<div id="searchbar">-->
        <!--&nbsp 节假日组：<input id="txtKey" type="text" />-->
        <!--<input id="btnOK"  class="l-button" type="button" value="搜索" onclick="f_search()" />-->
    <!--</div>-->
    <div class="l-clear"></div>
    <div id="maingrid" style="margin-top:20px"></div>
</div>
</body>
</html>
